<template>
    <div>
        <div class="mui-card good-info" v-for="item in shopcarlist" :key="item.id">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <mt-switch></mt-switch>
                    <img :src="item.thumb_path" alt="">
                    <div class="content">
                        <h3>{{item.title}}</h3>
                        <div class="detail">
                            <span class="price">¥{{item.sell_price}}</span>
<!--                            组件二-->
                            <shopbox :count="$store.getters.getcount[item.id]"></shopbox>
                            <a href="#">删除</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    这是一个最简单的卡片视图控件；卡片视图常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、点赞数量等
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import shopbox from "../subcom/shopcar-box.vue"
    import axios from "axios"
    export default {
        name: "shopcar",
        components:{
            shopbox
        },
        data(){
            return{
                shopcarlist: []
            }
        },
        methods:{
            getcarinfo(){
                let idarr = []
                this.$store.state.car.map(item=>idarr.push(item.id))

                if(idarr.length ===0){
                    return
                }
                axios.get("api/goods/getshopcarlist/"+ idarr.join(","))
                    .then(suc=>{
                        // console.log(suc)
                        this.shopcarlist = suc.data.message
                    })
                    .catch(err=>{
                        console.log(err)
                    })

            }
        },
        created() {
            this.getcarinfo()
        }
    }
</script>

<style scoped lang="less">
    .good-info{

        .mui-card-content-inner{
            display: flex;
            align-items: center;
            justify-content: space-between;


            img{
                width: 70px;
                height: 70px;
            }
            .content{
                display: flex;
                height: 100%;
                width: 100%;
                flex-direction: column;

                h3{
                    font-size: 13px;
                    margin-bottom: 10px;
                }


                .detail{
                    display: flex;
                    width: 100%;
                    justify-content: space-between;
                    font-size: 14px;

                    .price{
                        color: red;
                        font-weight: 400;
                    }
                }
            }
        }
    }
</style>